<template>
  <!--布局容器-->
  <el-container class="home-container">
    <!--页面头部区-->
    <el-header>
      <div id="clock">
        <span style="color: white">
          {{ timeBox.year }}年{{ timeBox.month }}月{{ timeBox.date }}日
          {{'&nbsp' + '&nbsp' + timeBox.day + '&nbsp' + '&nbsp'}}
          {{ timeBox.hours }}时{{ timeBox.minutes }}分{{ timeBox.seconds }}秒</span>
      </div>
    </el-header>
    <!--页面主体区区-->
    <el-container>
      <!--侧边栏-->
      <el-aside :width="collapseMenu ? '64px' : '200px'" >
        <CommonAside @sonChange="change"></CommonAside>
      </el-aside>
      <!--右侧内容主体-->
      <el-main>
        <!--路由占位符-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import CommonAside from '../views/CommonAside.vue'
import { mapGetters } from 'vuex'
import fa from "element-ui/src/locale/lang/fa";

export default {
  name: 'myHome',
  data(){
    return{
      // 控制页面展开关闭
      collapseMenu: false,
      // 时间模块
      timeBox: {
        year: '',
        month: '',
        date: '',
        day: '',
        hours: '',
        minutes: '',
        seconds: ''
      }
    }
  },
  mounted() {
    this.updateClock(); // 显示基础日期
    setInterval(this.updateClock, 1000); // 每秒更新一次日期
  },
  methods: {
    // 登出函数
    logOut() {
      //登出时清空当前页面的token令牌值（不严谨版）
      window.sessionStorage.clear();
      this.$router.push('/login');
      this.$message({ message: '登出成功', type: 'success', duration: 800 });
    },
    // 框展开、关闭
    change() {
      this.collapseMenu = !this.collapseMenu
    },
    // 更新时钟
    updateClock() {
      const now = new Date();
      this.timeBox.year = now.getFullYear();
      this.timeBox.month = now.getMonth() + 1;
      this.timeBox.date = now.getDate();
      this.timeBox.day = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][now.getDay()];
      this.timeBox.hours = now.getHours() > 9 ? now.getHours() : "0" + now.getHours();
      this.timeBox.minutes = now.getMinutes() > 9 ? now.getMinutes() : "0" + now.getMinutes();
      this.timeBox.seconds = now.getSeconds() > 9 ? now.getSeconds() : "0" + now.getSeconds();
    }
  },
  components: {
    CommonAside,
  },
}
</script>
<style lang="less" scoped>
// 整体布局配置
.home-container {
  /*整体高度设置为100%*/
  height: 100vh;
  // header配置
  .el-header {
    /*左侧紧贴边*/
    padding-left: 0;
    /*右侧紧贴边*/
    padding-right: 0;
    background-image:url("../assets/images/icon_niaoqingbeijing_header.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    // el-header的默认高度是60px
    //  内部div配置
    #clock {
      margin-top: 35px;
      text-align: center;
      //background-color: blueviolet;
    }
  }
  .el-aside {
    /*侧边框的背景颜色*/
    transition: width .4s;
    margin-top: 20px;
    border-radius: 5px; /* 圆角半径，根据需要调整 */
    background-color: #093047;
  }


}
</style>